<template>
  <!-- 选择医疗机构弹窗 -->
  <Modal
      v-model="visible"
      title="药店选择弹窗"
      width="1100px"
      class="drugmanagement-departmentdrug-add-choose">
      <div class="Institutionalregistration">
          <div class="container">
              <header style="paddingBottom: 20px;">
                  <div class="search">
                      <newfourLevelLinkage
                          @changeProvince="changeProvince"
                          @changeCity="changeCity"
                          @changeArea="changeArea"
                          :province="modalFilterObj.provinceCode"
                          :city="modalFilterObj.cityCode"
                          :area="modalFilterObj.areaCode"
                      ></newfourLevelLinkage>
                  <Input v-model.trim="modalFilterObj.searchKey" clearable style="width: 260px" placeholder="药店名称"/>
                      <Button style="width:51px;height:35px;"
                          type="primary"
                          @click="modalSearch()"
                          icon="ios-search"
                      ></Button>
                      <Button @click="modalReset" style="width:51px;height:35px;">
                        <i class = "iconfont icon-gengxin" style="font-size:14px;"></i>
                      </Button>
                  </div>
              </header>
              <div class="list">
                  <Table
                      border
                      :columns="modalColumn"
                      :data="modalData"
                      stripe
                      :loading="modalTableLoading"
                      @on-row-click="onRowClick"
                      no-filtered-data-text="未查询到符合条件的记录"></Table>
              </div>
              <div class="page">
                <Page :total="modalCount" :current='modalFilterObj.pageNo' :page-size="modalFilterObj.pageSize" show-total show-elevator @on-change="modalPageChange"/>
              </div>
          </div>
      </div>
      <div class="btn-group">
          <Button class="save" type="primary" :disabled="currentChoose.id !== 0 && !currentChoose.id"  @click="handleModalSave">确认选择</Button>
      </div>
  </Modal>
</template>

<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
const modalFilterObj = {
    provinceCode: null,
    cityCode: null,
    areaCode: null,
    pageNo: 1,
    pageSize: 10,
    searchKey: '',
    hospitalType: 2,
}
export default {
  components: {
    newfourLevelLinkage
  },
  model: {
    prop: "visible",
    event: "change"
  },
  props: {
    visible: Boolean,
    onCancel: () => {},
    onOk: () => {}
  },
  created() {
  },
  data() {
    return {
      modalFilterObj: this.deepClone(modalFilterObj),
      modalTableLoading: false,
      currentChoose: {},
      modalColumn: [
        {
          title: "机构名称",
          key: "orgName",
          align: "center",
          // width: 300,
          render: (h, params) => {
            let name = params.row.orgName;
            return h(
              "p",
              {
                style: {
                  display: "inline-block",
                  width: params.column._width * 0.8 + "px",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap"
                }
              },
              name
            );
          }
        },
        {
          title: "机构地址",
          key: "hosAddr",
          align: "center"
        },
        {
          title: "联系人",
          key: "linkman",
          align: "center",
          // width: 150,
          render: (h, params) => {
            let row = params.row;
            let name = "";
            let style = {};
            if (Boolean(row.linkman)) {
              name = row.linkman;
            } else {
              name = "暂无";
              style.color = "gray";
            }

            return h(
              "span",
              {
                style
              },
              name
            );
          }
        },
        {
          title: "联系电话",
          key: "linkmanTelephone",
          align: "center",
          // width: 150,
          render: (h, params) => {
            let row = params.row;
            let name = "";
            let style = {};
            if (Boolean(row.linkmanTelephone)) {
              name = row.linkmanTelephone;
            } else {
              name = "暂无";
              style.color = "gray";
            }
            return h(
              "span",
              {
                style
              },
              name
            );
          }
        },
        {
            title: '选择',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let flag = false;
              if (this.currentChoose.id === params.row.id) {
                flag = true
              } else {
                flag = false
              }
              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      self.currentChoose = params.row;
                    }
                  }
                })
              ])
            }
        },
      ],
      modalPageList: [
        {
          value: 10,
          label: 10
        },
        {
          value: 20,
          label: 20
        },
        {
          value: 50,
          label: 50
        }
      ],
    }
  },
  mounted() {
  },
  methods: {
    onRowClick(n, o) {
      this.currentChoose = n;
    },
    handleChange() {
      this.$emit("change", [this.fromTime, this.endTime]);
    },
    changeProvince(val) {
      this.modalFilterObj.provinceCode = val;
      this.modalFilterObj.cityCode = null;
      this.modalFilterObj.areaCode = null;
    },
    changeCity(val) {
      this.modalFilterObj.cityCode = val;
      this.modalFilterObj.areaCode = null;
    },
    changeArea(val) {
      this.modalFilterObj.areaCode = val;
    },
    modalSearch() {
        this.modalFilterObj.pageNo = 1
        this.pharmacyInfo()
    },
    modalReset() {
        this.modalFilterObj = this.deepClone(modalFilterObj);
        this.pharmacyInfo()
    },
    handleModalSave() {
      this.onOk && this.onOk(this.currentChoose);
    },
    modalPageChange(index) {
        this.modalFilterObj.pageNo = index;
        this.pharmacyInfo();
    },
    pharmacyInfo() {
      this.modalTableLoading = true;
      this.$axios.post(api.mechanismregList, this.modalFilterObj).then(res => {
          this.modalTableLoading = false;
          if (res.data.code === 1) {
              let ret = res.data.object;
              this.modalData = ret.records;
              this.modalCount = ret.total;
          }
      });
    },
    deepClone(obj) {
        return JSON.parse(JSON.stringify(obj))
    },
  },
  watch: {
    visible(n) {
      this.$emit("change", n);
      this.currentChoose = {};
      if (n) {
        this.modalFilterObj.pageNo = 1;
        this.pharmacyInfo();
      }
    },
    'modalFilterObj.pageSize'() {
      this.pharmacyInfo();
    },
  }
}
</script>

<style scoped lang="less">
.drugmanagement-departmentdrug-add-choose {
    /deep/ .ivu-modal-wrap {
        .ivu-modal-footer {
            display: none;
        }
        .btn-group {
            text-align: center;
            .save {
                width: 100px;
                margin-right: 20px;
            }
            .close {
                margin-left: 20px;
                width: 100px;
            }
        }
        .ivu-table .demo-table-info-row td{
            background-color: #02A198;
            color: #fff;
        }
    }
}
.page{
	text-align: center;
	margin: 20px 0;
}
</style>